<template>
    <el-form
        :model="formData"
        class="form-inline"
        label-width="100px"
        status-icon
        :inline="true"
    >
        <el-row>
            <el-col :span="6">
                <el-form-item label="开始月份选择" prop="month">
                    <el-date-picker
                        v-model="formData.start_month"
                        type="month"
                        placeholder="选择月份"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="截止月份选择" prop="month">
                    <el-date-picker
                        v-model="formData.end_month"
                        type="month"
                        placeholder="选择月份"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="成本中心" prop="fee_owner">
                    <el-select
                        v-model="formData.fee_owner"
                        filterable
                        placeholder="select"
                        :clearable="true"
                    >
                        <el-option
                            v-for="optionvalue in cntrOwner"
                            :key="optionvalue.value"
                            :value="optionvalue.value"
                            :label="optionvalue.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <search-btn @click="onRefresh"></search-btn>
            </el-col>
        </el-row>
    </el-form>
    <el-row>
        <v-chart class="chart" :option="inoutCntrOption" autoresize />
        <v-chart class="chart" :option="stackCntrOption" autoresize />
    </el-row>
    <el-row>
        <v-chart class="chart" :option="leaseCntrOption" autoresize />
    </el-row>
</template>
<script setup lang="ts" name="BusiEcharts">
/**
 * 业务量走势分析
 */
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';

import { use, ComposeOption } from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    ToolboxComponent,
    ToolboxComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption,
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
]);

import VChart, { THEME_KEY } from 'vue-echarts';

import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import type { BusiEchartsParam } from '@/common/types/report';
import SearchBtn from '@/components/button/SearchBtn.vue';

/* type EChartsOption = ComposeOption<
  | TitleComponentOption
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>; */

const { cntrOwner } = storeToRefs(useAppStore());
const formData = reactive<BusiEchartsParam>({
    start_month: new Date(),
    end_month: new Date(),
});
const inoutCntrOption = ref({
    title: {
        text: '购买/售出箱量(自然箱)',
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['购买', '售出'],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
    },
    yAxis: {
        type: 'value',
    },
    series: [{}],
});
const stackCntrOption = ref({
    title: {
        text: '堆存箱量(箱.天)',
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['堆存'],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
    },
    yAxis: {
        type: 'value',
    },
    series: [{}],
});
const leaseCntrOption = ref({
    title: {
        text: '出租箱量(箱.天)',
    },
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['出租'],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
    },
    yAxis: {
        type: 'value',
    },
    series: [{}],
});
const onInCntr = (data: { month: string; value: string }[]) => {
    // inoutCntr
    const cntrData: number[] = [];
    for (let index = 0; index < inoutCntrOption.value.xAxis.data.length; index++) {
        const month = inoutCntrOption.value.xAxis.data[index] as string;
        const find = data.find(
            (e: any) => e.month === month
        );
        if (find) {
            cntrData.push(parseInt(find.value));
        } else {
            cntrData.push(0);
        }
    }
    
    inoutCntrOption.value.series.push({
        name: '购买',
        type: 'line',
        
        data: cntrData,
    });

    // console.log(inoutCntrOption.value.series);
};
const onOutCntr = (data: { month: string; value: string }[]) => {
    // inoutCntr
    const cntrData: number[] = [];
    for (let index = 0; index < inoutCntrOption.value.xAxis.data.length; index++) {
        const month = inoutCntrOption.value.xAxis.data[index] as string;
        const find = data.find(
            (e: any) => e.month === month
        );
        if (find) {
            cntrData.push(parseInt(find.value));
        } else {
            cntrData.push(0);
        }
    }
    
    inoutCntrOption.value.series.push({
        name: '售出',
        type: 'line',
        // stack: 'Total',
        data: cntrData,
    });

    // console.log(inoutCntrOption.value.series);
};
const onStackCntr = (data: { month: string; value: string }[]) => {
    // inoutCntr
    const cntrData: number[] = [];
    for (let index = 0; index < stackCntrOption.value.xAxis.data.length; index++) {
        const month = stackCntrOption.value.xAxis.data[index] as string;
        const find = data.find(
            (e: any) => e.month === month
        );
        if (find) {
            cntrData.push(parseInt(find.value));
        } else {
            cntrData.push(0);
        }
    }
    
    stackCntrOption.value.series.push({
        name: '堆存',
        type: 'line',
        // stack: 'Total',
        data: cntrData,
    });

    // console.log(inoutCntrOption.value.series);
};
const onLeaseCntr = (data: { month: string; value: string }[]) => {
    // inoutCntr
    const cntrData: number[] = [];
    for (let index = 0; index < leaseCntrOption.value.xAxis.data.length; index++) {
        const month = leaseCntrOption.value.xAxis.data[index] as string;
        const find = data.find(
            (e: any) => e.month === month
        );
        if (find) {
            cntrData.push(parseInt(find.value));
        } else {
            cntrData.push(0);
        }
    }
    
    leaseCntrOption.value.series.push({
        name: '出租',
        type: 'line',
        // stack: 'Total',
        data: cntrData,
    });

    // console.log(inoutCntrOption.value.series);
};
const onRefresh = async () => {
    const req = new Request('业务数据展示', {
        start_tim: formData.start_month,
        end_tim: formData.end_month,
        fee_owner: formData.fee_owner,
    });
    const r = await req.post();

    inoutCntrOption.value.xAxis.data.length = 0;
    inoutCntrOption.value.xAxis.data = r.ext;
    inoutCntrOption.value.series.length = 0;
    stackCntrOption.value.xAxis.data.length = 0;
    stackCntrOption.value.xAxis.data = r.ext;
    stackCntrOption.value.series.length = 0;
    leaseCntrOption.value.xAxis.data.length = 0;
    leaseCntrOption.value.xAxis.data = r.ext;
    leaseCntrOption.value.series.length = 0;
    onInCntr(r.obj.inCntr);
    onOutCntr(r.obj.outCntr);
    onStackCntr(r.obj.stackCntr);
    onLeaseCntr(r.obj.leaseCntr);
    // console.log(inoutCntrOption.value.series);
};
</script>
<style lang="scss" scoped>
.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}
.chart {
    height: 50vh;
    width: 48%;
    margin: 0 5px 5px 0;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.row-chart {
    height: 50vh;
    width: 50%;
    margin: auto;
}
</style>
